import { TableColumn } from "@/components/GuatTable/types";
import { Avatar, Space, Tag } from "@arco-design/web-vue";
import { RolePropertyMap as RPM } from "@/map/role/property-map";
import { RoleList } from "@/types/api/role";
import GuatAction from "@/components/GuatActions/index.vue";
import Action from "@/components/GuatActions/index.vue";
import { RoleStatus } from "@/constant/dictionary";
import Permissions from "@/constant/permission";

export const createTableColumns = ({
  handleClickEdit: onClickEdit,
  handleClickDelete: onClickDelete,
}: {
  handleClickEdit: (record: any) => void;
  handleClickDelete: (record: any) => void;
}): TableColumn[] => [
  {
    showTitle: false,
    render: (record) => {
      let avatar =
        "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp";
      if (record.userAvatar) avatar = record.userAvatar;
      return (
        <Space size={[16, 0]}>
          <Avatar size={48}>
            <img src={avatar} />
          </Avatar>
          <Space direction="vertical" size={[0, 4]}>
            <div class="text-base">{record.userName}</div>
            <div style="color: var(--color-neutral-6)">{record.userNo}</div>
          </Space>
        </Space>
      );
    },
  },
  {
    title: "性别",
    dataIndex: "userGender",
  },
  {
    title: "联系方式",
    dataIndex: "userTel",
  },
  {
    title: "班级",
    dataIndex: "userClass",
  },
  {
    title: "角色",
    render: ({ userRole }) => {
      let color = "blue";
      if (userRole == "管理员") color = "red";
      return <Tag color={color}>{userRole}</Tag>;
    },
  },
  {
    title: "注册时间",
    dataIndex: "userRegisterTime",
  },
  {
    title: "当前积分",
    dataIndex: "userCurPoint",
  },
  {
    title: "当前状态",
    render: ({ userStatus }) => (
      <Tag size="large" color={userStatus == "正常" ? "green" : "red"}>
        {userStatus}
      </Tag>
    ),
  },
  {
    showTitle: false,
    render: (record) => (
      <GuatAction
        actions={[
          { internal: "edit", onClick: () => onClickEdit(record) },
          { internal: "delete", onClick: () => onClickDelete(record) },
        ]}
      />
    ),
  },
];

interface Methods<T> {
  del: (record: T) => void;
  upd: (record: T) => void;
}

export const createRoleTable = (
  methods: Methods<RoleList["Table"]>
): TableColumn<RoleList["Table"]>[] => [
  {
    title: "角色名称",
    dataIndex: RPM.Name,
  },
  {
    title: "创建时间",
    dataIndex: RPM.CreateTime,
  },
  {
    title: "角色状态",
    render: ({ [RPM.Status]: status }) => {
      const isEnable = status == RoleStatus.ENABLE;
      return (
        <Tag size="large" color={isEnable ? "green" : "red"}>
          {RoleStatus[status as 0]}
        </Tag>
      );
    },
  },

  {
    showTitle: false,
    width: 120,
    render: (record) => (
      <Action
        actions={[
          {
            internal: "edit",
            permission: Permissions.SYSTEM_ROLE_UPD,
            onClick: () => methods.upd(record),
          },
          {
            internal: "delete",
            permission: Permissions.SYSTEM_ROLE_DEL,
            onClick: () => methods.del(record),
          },
        ]}
      />
    ),
  },
];
